<template>
  <div class="wallet">
    <div class="has-coupon" v-if="wallets.length !== 0">
      <div class="walletBox"
           v-for="wallet in wallets"
           :key="wallet.id"
      >
        <div class="coupon">

          <span class="circularTop"></span>
          <div class="couponLeft">${{wallet.sale_num}}</div>
          <div class="couponRight"><span>{{wallet.coupon_name}}</span>
            <van-icon class="pont" name="question-o"/>
          </div>
          <span class="circularBottom"></span>
        </div>
      </div>
    </div>

    <div class="empty-coupon" v-if="wallets.length === 0">什么都没有</div>

    <div class="recharge">
      <van-icon class="money" name="gold-coin-o"/>
      <span>充值优惠</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'
import { getWallet } from '@/API/wallet'

Vue.use(Icon)
export default {
  name: 'wallet-index',
  data () {
    return {
      wallets: []
    }
  },
  created () {
    getWallet().then(res => {
      this.wallets = res.body.resCoupon
    })
  }
}
</script>

<style lang="scss" scoped>
  body, html, main {
    height: 100%;
  }

  .wallet {
    height: 100%;
    background-color: #fff;
    margin-top: 10px;

    .walletBox {
      padding: 10px 10px;

      .coupon {
        height: 60px;
        background-color: #fff;
        // border-bottom: 1px solid rgb(104, 117, 240);
        position: relative;
        overflow: hidden;

        .circularTop {
          width: 30px;
          height: 30px;
          background-color: #fff;
          position: absolute;
          border: 1px solid rgb(104, 117, 240);
          border-radius: 50%;
          left: 62px;
          top: -18px;
          z-index: 20;
        }

        .circularBottom {
          width: 30px;
          height: 30px;
          background-color: #fff;
          position: absolute;
          border: 1px solid rgb(104, 117, 240);
          border-radius: 50%;
          left: 62px;
          bottom: -18px;
        }

        .couponLeft {
          float: left;
          // background-color: red;
          width: 19%;
          height: 97%;
          border-left: 1px solid rgb(104, 117, 240);
          border-top: 1px solid rgb(104, 117, 240);
          border-bottom: 2px solid rgb(104, 117, 240);
          text-align: center;
          line-height: 56px;
        }

        .couponRight {
          position: absolute;
          // float: right;
          width: 99%;
          height: 97%;
          border-right: 1px solid rgb(104, 117, 240);
          border-top: 1px solid rgb(104, 117, 240);
          border-bottom: 2px solid rgb(104, 117, 240);
          // background-color: yellow;
          text-align: center;
          line-height: 56px;

          .pont {
            // margin-top: 10px;
            font-size: 16px;
            margin-left: 10px;
            opacity: 0.5;
            transform: translateY(5px);
          }

          span {
            margin-left: 45px;
          }
        }
      }
    }

    .recharge {
      width: 100%;
      // background-color: red;
      height: 40px;
      font-size: 15px;
      line-height: 40px;
      text-align: center;
      position: absolute;
      bottom: 0;

      .money {
        transform: translateY(2px);
        margin-right: 8px;
      }
    }
  }
</style>
